<script setup>
import { computed, onBeforeUnmount } from 'vue'
import dayjs from 'dayjs'

const value = ref(Date.now() - 1000 * 60 * 60 * 7)
const value1 = ref(Date.now() - 1000 * 60 * 60 * 24 * 2)
const value2 = ref(dayjs().add(1, 'month').startOf('month'))

const webRuntime = ref([0, 0, 0, 0])
const serverTime = ref([0, 0, 0, 0])
const pageRuntime = ref([0, 0, 0, 0])
// 建站时间
let startTime = dayjs('2021-11-21T22:25:20.000Z').valueOf()
let pageTime = dayjs().valueOf()

let timer = setInterval(() => {
  let lenth, d, h, m, time = dayjs().valueOf()
  // 建站运行时间
  lenth = Number.parseInt((time - startTime) / 1000)
  d = Number.parseInt(lenth / (60 * 60 * 24))
  lenth = lenth % (60 * 60 * 24)
  h = Number.parseInt(lenth / (60 * 60))
  lenth = lenth % (60 * 60)
  m = Number.parseInt(lenth / (60))
  lenth = lenth % 60
  webRuntime.value = [d, h, m, lenth]
  // 页面运行时间
  lenth = Number.parseInt((time - pageTime) / 1000)
  m = Number.parseInt(lenth / (60))
  lenth = lenth % 60
  // console.log(d, h, m, lenth)
  pageRuntime.value = [d, h, m, lenth]

  // 服务时间
  lenth = Number.parseInt((time - dayjs(User.data.userCreatetime)) / 1000)
  d = Number.parseInt(lenth / (60 * 60 * 24))
  lenth = lenth % (60 * 60 * 24)
  h = Number.parseInt(lenth / (60 * 60))
  lenth = lenth % (60 * 60)
  m = Number.parseInt(lenth / (60))
  lenth = lenth % 60
  serverTime.value = [d, h, m, lenth]

}, 1000)

onBeforeUnmount(() => clearInterval(timer))
</script>

<template>
  <div class="model dilan">
    <div class="center">
      <div class="statistic">
        <div>
          <div class="title">页面已运行</div>
          <div class="time">
            {{ pageRuntime[2] }}<i>分</i>
            {{ pageRuntime[3] }}<i>秒</i>
          </div>
        </div>
        <div>
          <el-tooltip content="从您注册时间到现在" placement="top">
            <div class="title">已为你服务</div>
          </el-tooltip>
          <div class="time">
            {{ serverTime[0] }}<i>天</i>
            {{ serverTime[1] }}<i>时</i>
            {{ serverTime[2] }}<i>分</i>
            {{ serverTime[3] }}<i>秒</i>
          </div>

        </div>
        <div>
          <div class="title">网站已成立</div>
          <div class="time">
            {{ webRuntime[0] }}<i>天</i>
            {{ webRuntime[1] }}<i>时</i>
            {{ webRuntime[2] }}<i>分</i>
            {{ webRuntime[3] }}<i>秒</i>
          </div>
        </div>
      </div>
      <div class="texts">
        <div class="item">
          备案号：<a href="https://beian.miit.gov.cn/" target="_black">蜀ICP备2020030786号蜀ICP备2020030786号</a>
        </div>
        <div class="item">
          喜欢本站的话，不妨分享给你身边的同学们，万分感谢！
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
/* 底栏CSS */

.dilan {
  padding: 0px;
  border-radius: 0px;
  border-width: 1px 0;
  margin-top: 20px;

  >.center {
    width: 65%;
    margin: 0px auto;
    display: flex;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: 0.5s;

    .statistic {
      display: flex;
      width: 100%;
      justify-content: space-around;

      .title {
        font-weight: 400;
        font-size: 12px;
        color: var(--mini-text-color);
        margin-bottom: 4px;
        margin-top: 10px;
        text-align: center;
      }

      .time {
        font-weight: 400;
        font-size: 20px;
      }

      i {
        font-size: 10px;
        color: var(--mini-text-color);
      }

    }


    .texts {
      margin: 10px 0;
      text-align: center;
    }



  }
}


/* 一档，最大，电脑屏幕的大屏幕设备，显示所有信息 */
@media screen and (max-width: 1300px) {
  .dilan>.center {
    width: 95%;
  }
}

@media screen and (max-width: 600px) {
  .dilan>.center {
    width: 100%;

    .statistic {
      flex-direction: column;
      align-items: center;
    }

  }
}
</style>